<%@ page import="com.ws.utils.Res" %><%--
  Created by IntelliJ IDEA.
  User: lufei
  Date: 2025/3/20
  Time: 11:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>顽石旅行网</title>
    <!-- Bootstrap -->
    <link href="${ pageContext.request.contextPath}/home/css/bootstrap.min.css" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="${ pageContext.request.contextPath}/home/css/common.css">
    <link rel="stylesheet" type="text/css" href="${ pageContext.request.contextPath}/home/css/index.css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .topbar {
            position: relative
        }

        .hottel, .haslogin {
            position: absolute;
            top: 12px;
            right: 50px
        }

        .hottel p {
            cursor: pointer;
            font-weight: 700;
            float: left;
            width: 100px;
            border: 1px solid orange;
            text-align: center;
            height: 45px;
            line-height: 45px;
            margin-right: 10px
        }

        .hottel a {
            color: #666;
            text-decoration: none
        }

        .haslogin {
            top: 45px;
            right: 0
        }

        .haslogin p {
            font-weight: 700;
            float: left;
            margin-right: 30px;
            font-size: 18px
        }
        .footer_link{
            width: 100%;
            height: 50px;
            background-color: #a59f9f;
        }
        .footer_link p{
            font-size: 18px;
            text-align: center;
            line-height: 50px;
        }
        .footer_link a{
            color: #ffffff;
            text-decoration: none
        }
        .footer_link>p>a:hover{
            color: #ff0000;
            text-decoration: underline
        }
    </style>
</head>
<body>
<!--引入头部-->
<!-- 头部 start -->
<header id="header">

    <div class="header_wrap">
        <div class="topbar">
            <div class="logo">
                <a href="/"><img src="${pageContext.request.contextPath}/home/images/logo.png" style="height: 60px;" alt=""></a>
            </div>
            <div class="search">
                <form action="${pageContext.request.contextPath}/qianTai/tosSuoSuo" method="get">
                    <input name="route_name" type="text" placeholder="请输入路线标题" class="search_input" autocomplete="off">
                    <input type="submit" value="搜索" class="search-button">
                </form>
            </div>

            <c:if test="${user==null}">
                <div class="hottel">
                    <a href="${ pageContext.request.contextPath}/qianTaiLogin.jsp"><p>登录</p></a>
                    <a href="${ pageContext.request.contextPath}/qianTaiZhuCe.jsp"><p>注册</p></a>
                </div>
            </c:if>
            <c:if test="${user!=null}">
                <div class="haslogin">
                    <p>欢迎：${user.user_name}</p>
                    <p><a href="${pageContext.request.contextPath}/qianTai/tohome">个人主页</a></p>
                    <p><a href="${ pageContext.request.contextPath}/qianTai/tuichu" >退出登录</a></p>
                </div>
            </c:if>



        </div>
    </div>
</header>
<!-- 头部 end -->
<!-- 首页导航 -->
<div class="navitem">
    <ul class="nav">
        <c:forEach items="${categorieList}" var="categorie">
            <li class="nav-item">
                <a class="nav-link" href="${pageContext.request.contextPath}/qianTai/toindex?categorie_id=${categorie.categorie_id}">${categorie.categorie_name}</a>
            </li>
        </c:forEach>

    </ul>
</div>

<!-- banner start-->
<section id="banner">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="2000">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <c:forEach items="${carouselList}" var="carousel" varStatus="status">
                <li data-target="#carousel-example-generic" data-slide-to="${status.index}" class="${status.index==0?'active':''}"></li>
            </c:forEach>
        </ol>
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <c:forEach items="${carouselList}" var="carousel" varStatus="status">
                <div class="item ${status.index==0?'active':''}">
                    <a href="${pageContext.request.contextPath}/qianTai/toxiangqing?route_id=${carousel.route_id}">
                        <img src="<%=Res.fileUrl%>${carousel.imageURL}" alt="" style="width: 100%; height: 500px; ">
                    </a>
                </div>
            </c:forEach>
        </div>
        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

</section>
<!-- banner end-->
<!-- 旅游 start-->
<section id="content">

    <%--    循环出每个分类，然后再下方显示该分类的所有线路--%>
    <c:forEach items="${categorieList}" var="category">
        <section class="section_route">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="jx_top">
                            <div class="jx_tit">
                                <img src="${ pageContext.request.contextPath}/home/images/icon_5.jpg" alt="">
                                <span>${category.categorie_name}</span>
                            </div>
                        </div>
                        <div class="row">
                            <c:forEach items="${routesList}" var="route">
                                <c:if test="${route.categorie_id == category.categorie_id}">
                                    <div class="col-md-3" style="margin:10px">
                                        <a href="${pageContext.request.contextPath}/qianTai/toxiangqing?route_id=${route.route_id}">
                                            <img src="<%=Res.fileUrl%>${route.route_image}" height="200" width="300px"  alt="">
                                            <div class="has_border">
                                                <h3>${route.route_name}</h3>
                                                <div class="price">网付价<em></em><strong>${route.route_price}</strong><em>起</em></div>
                                            </div>
                                        </a>
                                    </div>
                                </c:if>
                            </c:forEach>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </c:forEach>
</section>
<!-- 旅游 end-->
<!--导入底部-->
<!-- 尾部 start-->
<footer id="footer">
    <div class="footer_link">
        <p>
            <c:forEach items="${linkList}" var="category">
                <a href="${category.link_url}">${category.link_name}</a>
            </c:forEach>
        </p>
    </div>
    <div class="company">
        <p>顽石教育有限公司 版权所有Copyright 2019-2020, All Rights Reserved 京ICP备12390</p>
    </div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="${ pageContext.request.contextPath}/home/js/jquery-3.3.1.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="${ pageContext.request.contextPath}/home/js/bootstrap.min.js"></script>
<!--导入布局js，共享header和footer-->
<script type="text/javascript" src="${ pageContext.request.contextPath}/home/js/include.js"></script>
</body>
</html>